<template>
  <div class="tumor-control-container">
    <!-- 功能菜单 -->
    <div class="function-menu">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card class="function-card" shadow="hover" @click="handlePatientRegistration">
            <div class="function-content">
              <div class="function-icon">
                <el-icon size="48" color="#409EFF"><UserFilled /></el-icon>
              </div>
              <div class="function-info">
                <h3>新增患者登记</h3>
                <p>登记新的肿瘤患者信息</p>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="function-card" shadow="hover" @click="handleBatchAdd">
            <div class="function-content">
              <div class="function-icon">
                <el-icon size="48" color="#67C23A"><Upload /></el-icon>
              </div>
              <div class="function-info">
                <h3>批量添加</h3>
                <p>通过Excel批量导入患者信息</p>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="function-card" shadow="hover" @click="handleStatistics">
            <div class="function-content">
              <div class="function-icon">
                <el-icon size="48" color="#E6A23C"><DataAnalysis /></el-icon>
              </div>
              <div class="function-info">
                <h3>病例统计</h3>
                <p>查看肿瘤病例统计数据</p>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 最近登记患者 -->
    <el-card class="recent-patients" shadow="never">
      <template #header>
        <div class="card-header">
          <span class="card-title">最近登记患者</span>
          <el-button type="text" @click="viewAllPatients">查看全部</el-button>
        </div>
      </template>
      
      <el-table :data="recentPatients" stripe>
        <el-table-column prop="patientId" label="患者ID" width="120" />
        <el-table-column prop="name" label="姓名" width="100" />
        <el-table-column prop="gender" label="性别" width="80">
          <template #default="{ row }">
            <el-tag :type="row.gender === '男' ? 'primary' : 'danger'" size="small">
              {{ row.gender }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="80" />
        <el-table-column prop="tumorType" label="肿瘤类型" width="120">
          <template #default="{ row }">
            <el-tag :type="getTumorTypeColor(row.tumorType)">
              {{ getTumorTypeName(row.tumorType) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="stage" label="分期" width="100">
          <template #default="{ row }">
            <el-tag :type="getStageColor(row.stage)">
              {{ row.stage }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="registrationDate" label="登记时间" width="120" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusColor(row.status)">
              {{ getStatusName(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="handleViewDetail(row)">
              详情
            </el-button>
            <el-button type="success" size="small" @click="handleEdit(row)">
              编辑
            </el-button>
            <el-button type="warning" size="small" @click="handleFollowUp(row)">
              随访
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 统计概览 -->
    <el-card class="statistics-overview" shadow="never">
      <template #header>
        <span class="card-title">统计概览</span>
      </template>
      
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-value">{{ totalPatients }}</div>
            <div class="stat-label">总患者数</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-value">{{ newThisMonth }}</div>
            <div class="stat-label">本月新增</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-value">{{ activePatients }}</div>
            <div class="stat-label">在治患者</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-value">{{ followUpToday }}</div>
            <div class="stat-label">今日随访</div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 患者登记对话框 -->
    <el-dialog
      v-model="registrationDialogVisible"
      title="新增患者登记"
      width="800px"
    >
      <el-form :model="registrationForm" :rules="registrationRules" ref="registrationFormRef" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="患者姓名" prop="name">
              <el-input v-model="registrationForm.name" placeholder="请输入患者姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="gender">
              <el-radio-group v-model="registrationForm.gender">
                <el-radio label="男">男</el-radio>
                <el-radio label="女">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="年龄" prop="age">
              <el-input-number v-model="registrationForm.age" :min="0" :max="150" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号" prop="idCard">
              <el-input v-model="registrationForm.idCard" placeholder="请输入身份证号" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="registrationForm.phone" placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="肿瘤类型" prop="tumorType">
              <el-select v-model="registrationForm.tumorType" placeholder="请选择肿瘤类型">
                <el-option label="肺癌" value="lung" />
                <el-option label="乳腺癌" value="breast" />
                <el-option label="胃癌" value="stomach" />
                <el-option label="肝癌" value="liver" />
                <el-option label="结直肠癌" value="colorectal" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="TNM分期" prop="stage">
              <el-select v-model="registrationForm.stage" placeholder="请选择分期">
                <el-option label="I期" value="I" />
                <el-option label="II期" value="II" />
                <el-option label="III期" value="III" />
                <el-option label="IV期" value="IV" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="确诊日期" prop="diagnosisDate">
              <el-date-picker
                v-model="registrationForm.diagnosisDate"
                type="date"
                placeholder="请选择确诊日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="家庭住址" prop="address">
          <el-input v-model="registrationForm.address" placeholder="请输入家庭住址" />
        </el-form-item>
        
        <el-form-item label="病情描述" prop="description">
          <el-input
            v-model="registrationForm.description"
            type="textarea"
            :rows="4"
            placeholder="请输入病情描述"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="registrationDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmitRegistration">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { UserFilled, Upload, DataAnalysis } from '@element-plus/icons-vue'

const router = useRouter()

// 对话框控制
const registrationDialogVisible = ref(false)
const registrationFormRef = ref()

// 统计数据
const totalPatients = ref(1456)
const newThisMonth = ref(89)
const activePatients = ref(1234)
const followUpToday = ref(23)

// 最近患者数据
const recentPatients = ref([
  {
    patientId: 'T001234',
    name: '张三',
    gender: '男',
    age: 65,
    tumorType: 'lung',
    stage: 'III',
    registrationDate: '2024-01-15',
    status: 'treatment'
  },
  {
    patientId: 'T001235',
    name: '李四',
    gender: '女',
    age: 58,
    tumorType: 'breast',
    stage: 'II',
    registrationDate: '2024-01-14',
    status: 'followup'
  },
  {
    patientId: 'T001236',
    name: '王五',
    gender: '男',
    age: 72,
    tumorType: 'stomach',
    stage: 'IV',
    registrationDate: '2024-01-13',
    status: 'treatment'
  }
])

// 登记表单
const registrationForm = reactive({
  name: '',
  gender: '',
  age: null,
  idCard: '',
  phone: '',
  tumorType: '',
  stage: '',
  diagnosisDate: '',
  address: '',
  description: ''
})

// 表单验证规则
const registrationRules = {
  name: [{ required: true, message: '请输入患者姓名', trigger: 'blur' }],
  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
  age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
  tumorType: [{ required: true, message: '请选择肿瘤类型', trigger: 'change' }],
  stage: [{ required: true, message: '请选择分期', trigger: 'change' }]
}

// 工具函数
const getTumorTypeName = (type: string) => {
  const map: Record<string, string> = {
    lung: '肺癌',
    breast: '乳腺癌',
    stomach: '胃癌',
    liver: '肝癌',
    colorectal: '结直肠癌'
  }
  return map[type] || type
}

const getTumorTypeColor = (type: string) => {
  const map: Record<string, string> = {
    lung: 'danger',
    breast: 'warning',
    stomach: 'primary',
    liver: 'success',
    colorectal: 'info'
  }
  return map[type] || 'info'
}

const getStageColor = (stage: string) => {
  const map: Record<string, string> = {
    'I': 'success',
    'II': 'warning',
    'III': 'danger',
    'IV': 'danger'
  }
  return map[stage] || 'info'
}

const getStatusName = (status: string) => {
  const map: Record<string, string> = {
    treatment: '治疗中',
    followup: '随访中',
    completed: '治疗完成',
    suspended: '暂停治疗'
  }
  return map[status] || status
}

const getStatusColor = (status: string) => {
  const map: Record<string, string> = {
    treatment: 'primary',
    followup: 'success',
    completed: 'info',
    suspended: 'warning'
  }
  return map[status] || 'info'
}

// 事件处理函数
const handlePatientRegistration = () => {
  registrationDialogVisible.value = true
}

const handleBatchAdd = () => {
  ElMessage.info('批量添加功能开发中')
}

const handleStatistics = () => {
  router.push('/medical-center/tumor-control/statistics')
}

const viewAllPatients = () => {
  ElMessage.info('查看全部患者')
}

const handleViewDetail = (row: any) => {
  ElMessage.info(`查看患者详情: ${row.name}`)
}

const handleEdit = (row: any) => {
  ElMessage.info(`编辑患者: ${row.name}`)
}

const handleFollowUp = (row: any) => {
  ElMessage.info(`随访患者: ${row.name}`)
}

const handleSubmitRegistration = () => {
  registrationFormRef.value?.validate((valid: boolean) => {
    if (valid) {
      ElMessage.success('患者登记成功')
      registrationDialogVisible.value = false
      // 重置表单
      Object.assign(registrationForm, {
        name: '',
        gender: '',
        age: null,
        idCard: '',
        phone: '',
        tumorType: '',
        stage: '',
        diagnosisDate: '',
        address: '',
        description: ''
      })
    }
  })
}

onMounted(() => {
  console.log('肿瘤防控页面加载完成')
})
</script>

<style lang="scss" scoped>
.tumor-control-container {
  .function-menu {
    margin-bottom: 24px;
    
    .function-card {
      cursor: pointer;
      transition: all 0.3s ease;
      height: 140px;
      
      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
      }
      
      .function-content {
        display: flex;
        align-items: center;
        height: 100%;
        
        .function-icon {
          margin-right: 20px;
        }
        
        .function-info {
          h3 {
            margin: 0 0 8px 0;
            color: #303133;
            font-size: 18px;
            font-weight: 600;
          }
          
          p {
            margin: 0;
            color: #909399;
            font-size: 14px;
          }
        }
      }
    }
  }
  
  .recent-patients {
    margin-bottom: 24px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .card-title {
        font-size: 16px;
        font-weight: 600;
        color: #303133;
      }
    }
  }
  
  .statistics-overview {
    .stat-item {
      text-align: center;
      padding: 20px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 8px;
      color: white;
      
      .stat-value {
        font-size: 32px;
        font-weight: 700;
        margin-bottom: 8px;
      }
      
      .stat-label {
        font-size: 14px;
        opacity: 0.9;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .tumor-control-container {
    .function-menu {
      .el-col {
        margin-bottom: 16px;
      }
    }
    
    .statistics-overview {
      .el-col {
        margin-bottom: 12px;
      }
    }
  }
}
</style>